<template>
  <div class="home">
    <swiper
      v-if="page.length"
      :slides-per-view="1"
      :space-between="0"
      :loop="false"
      :pagination="false"
      :navigation="false"
      :auto-height="true"
      direction="vertical"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
    >
      <swiper-slide class="relative">
        <img
          :src="page[0].img"
          alt=""
          class="width-100"
        >
        <div
          class="absolute"
          style="top: 80px;left:200px;font-size:30px;width:400px;"
        >
          <div>{{ page[0].t1 }}</div>
          <div class="bd bb bd-000 pb10 mb10">
            {{ page[0].t2 }}
          </div>
          <div class="f20 c-666">
            {{ page[0].t3 }}
          </div>
        </div>
      </swiper-slide>
      <swiper-slide class="relative">
        <div class="tc">
          {{ page[1].t1 }}
        </div>
        <img
          :src="page[1].img"
          alt=""
          class="width-100"
        >
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>

export default {
  name: 'Home',

  data() {
    return {
      page: []
    }
  },

  async created () {
    const { data } = await this.fetch('/page1.json')
    this.page = data
    this.swiperInit()
  },

  methods: {
    onSwiper(swiper) {
      console.log(swiper)
    },
    onSlideChange() {
      console.log('slide change')
    }
  }
}
</script>
